<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>天气案例-监视属性-简写</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button>
  </div>
</body>

<script type="text/javascript">
  Vue.config.productionTip = false; // 阻止Vue在启动时生成生产提示。

  const vm = new Vue({
    el: "#root",
    data: {
      isHot: true
    },
    computed: {
      info() {
        return this.isHot ? "炎热" : "凉爽";
      }
    },
    methods: {
      changeWeather() {
        this.isHot = !this.isHot;
      }
    },
    watch: {
      /*  // 正常写法
      isHot: {
        handler(newValue, oldValue) {
          console.log("isHot被修改了", newValue, oldValue);
        }
      }, */
      // 简写
      isHot(newValue, oldValue) {
        console.log("isHot被修改了", newValue, oldValue, this);
      }
    }
  });

  /*  // 正常写法
  vm.$watch("isHot", {
    handler(newValue, oldValue) {
      console.log("isHot被修改了", newValue, oldValue);
    }
  });

  // 简写
  vm.$watch("info", function (newValue, oldValue) {
    console.log("info被修改了", newValue, oldValue, this);
  }); */
</script>

</html>